<template>
  <li class="tree-item">
    <div class="item-wrapper" @mouseenter="change = true && isEdit" @mouseleave="change = false"
      :class="{'firstItem': this.$props.children.id == 0, }">
      <span class="item-toggle" @click="toggle();">
        <!-- 展开 -->
        <div class="unfold">
          <img src="../assets/images/teacher/addCourse/add.svg" alt="+">
        </div>
        <div v-if="this.model.depth != 0 && this.$props.parent.children.length - 1 != this.$props.children.id && !open"
          class="connect">
          |
        </div>
      </span>

      <!-- 展示内容 -->
      <span class="item-label" @click="showCon = true; editItemInd()" >
        <input type="text" v-model="model.label" @keyup.enter="disable = true" :disabled="disable || model.depth == 0" @blur="disable = true">
      </span>

      <!-- 分别是编辑、添加、删除 -->
      <span @click="disable = false"  v-show="change && model.depth != 0" class="opera">
        <img src="../assets/images/teacher/addCourse/edit.svg" alt="编辑">
      </span>
      <span @click="addItemInd" v-show="change && model.depth != 2" class="opera">
        <img src="../assets/images/teacher/addCourse/add-circle(1).svg" alt="添加">
      </span>
      <span @click="delItemInd" v-show="change && model.depth != 0" class="opera">
        <img src="../assets/images/teacher/addCourse/minus-circle.svg" alt="删除">
      </span>
    </div>
    <ul v-if="isFolder" v-show="open" class="tree-list demo-1">
      <tree-item v-for="(item, idx) in model.children" :model="item" :key="idx" @delItem="delItem" @addItem="addItem"
        :children="item" :parent="model" @editItem="editItem" :isEdit = "isEdit" />
    </ul>
  </li>
</template>
<script>
export default {
  name: 'tree-item',
  props: {
    model: {
      type: Object,
      default: function () {
        return {}
      }
    },
    children: {
      type: Array,
      default: []
    },
    parent: {
      type: Object || String
    },
    isEdit: {
      type: Boolean
    }
  },

  data() {
    return {
      open: false,
      change: false,
      find: false,
      targetPar: '',
      targetChild: '',
      disable: true
    }
  },

  computed: {
    //判断是否可以展开
    isFolder() {
      return this.model.children && this.model.children.length
    },
  },

  methods: {
    toggle() {       //切换
      if (this.isFolder) {
        this.open = !this.open
      }
    },

    //删除数据
    delItemInd() {
      this.$emit('delItem', this.$props.parent, this.$props.children)
    },

    //删除二级标题
    delItem(parent, children) {
      this.$emit('delItem', parent, children)
    },

    //添加标题
    addItemInd() {
      //添加二级标题,往上找多一层
      //添加一级标题，直接找爷
      this.$emit('addItem', this.model)
    },

    //添加二级标题标题
    addItem(parent) {
      this.$emit('addItem', parent)
    },

    //添加内容
    editItemInd(){
      this.$emit('editItem', this.$props.parent, this.$props.children)
    },

    //编辑二级标题的内容
    editItem(parent, children){
      this.$emit('editItem', parent, children)
    }

  }
}
</script>
<style scoped>
.unfold {
  width: 14.5px;
  height: 14.5px;
  background-image: linear-gradient(90deg,
    );
  border: 1px solid #707070;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opera {
  cursor: pointer;
  display: inline-block;
  margin-right: 3%;
}

.opera img {
  margin-top: 27%;
  width: 15px;
  height: 15px;
}

.connect {
  display: flex;
  justify-content: center;
  color: #707070;
}

.tree-list .item-toggle,
.tree-list .item-label {
  cursor: pointer;
  margin-right: 6%;
  font-family: Source Han Sans CN;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #6f6f6f;
}

.item-label input {
  outline: none;
  border: 0px;
  background-color: #fafafa;
  min-width: 100px;
  font-family: Source Han Sans CN;
  font-size: 0.95em;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #6f6f6f;
}

.tree-list .item-toggle {
  width: 14px;
}

.tree-list .item-wrapper {
  height: 100%;
  line-height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-top: 3px;
}

.firstItem {
  margin-top: 4%;
}

.last-item {
  margin-bottom: 1%;
}

.tree-item {
  list-style: none;
}

.tree-list {
  list-style-type: none;
  padding-left: 20px;
  max-height: 280px;
  max-width: 89%;
  overflow-y: scroll;
}

/*滚动条整体样式*/
.demo-1::-webkit-scrollbar {
  margin-top: 3%;
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}

/*滚动条里面小方块*/
.demo-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #d4d4d4;
  opacity: 0.3;
}

/*滚动条里面轨道*/
.demo-1::-webkit-scrollbar-track {
  /* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 10px;
}

</style>